<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>model</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         .bord{
             border: 1px dashed #ee2602;
             width: 90%;
             margin: 20px auto;
         }
         .title{
             font-size: 20px;
             font-weight: bold;
             margin: 20px;
         }
         .introduce{
             font-size: 16px;
             margin: 0 0 20px 50px;
         }
         .red{
             color: red;
         }
     </style>
     <script>
         //表单验证方法
         var mysub = function () {
             //姓名验证
             if (document.getElementById('txt1').value.length<1){
                 alert('请输入姓名！');
                 document.getElementById('txt1').focus();
                 return false;
             }

             //密码验证
             if (document.getElementById('txt2').value.length<1){
                 alert('请输入密码！');
                 document.getElementById('txt2').focus();
                 return false;
             }
             //判断密码长度是否为6位
             if (document.getElementById('txt2').value.length<6){
                 alert('密码不能少于6位，请重新输入！');
                 document.getElementById('txt2').focus();
                 return false;
             }

             //会员验证
             var radio_status = false;//假设所有的单选按钮没有被选中的
             var list = document.getElementsByName('member');
             //查看按钮选中状态
             for (var i = 0;i < list.length;i++){
                 //如果有一个按钮的状态是选中的话，那么
                 if  (list[i].checked){
                     radio_status = true;
                 }
             }
             //否则的话
             if (radio_status ==false){
                 alert('请选择会员类型！');
                 return false;
             }

             //爱好验证
             var num = 0;//假设所有的单选按钮没有被选中的
             var list2 = document.getElementsByName('lovely');
             //查看按钮选中状态
             for (var j = 0;j< list2.length;j++){
                 //如果有一个按钮的状态是选中的话，那么
                 if  (list2[j].checked){
                     num++;
                 }
             }
             //否则的话
             if (num < 2){
                 alert('至少选择两个爱好！');
                 return false;
             }

             window.location.href = '../jshomework/marquee.html';
         };

         //当页面加载完成
         window.onload = function () {
             document.getElementById('txt1').focus();
             document.getElementById('bt1').onclick = function () {
                 mysub();
             };
         };
     </script>
 </head>
 <body>
 <div class="bord">
     <div class="title">用户注册</div>
     <div class="introduce">
         <form action="../jshomework/marquee.html" method="post" onsubmit="return mysub();">
             <input type="hidden" value="顶顶顶"/>
             <table width=100%>
                 <br/>

                 <tr>
                     <td style="text-align:right">姓名：</td>
                     <td style="text-align: left"><input id="txt1" type ="text" /></td>
                 </tr>
                 <tr>
                     <td style="text-align:right">头像：</td>
                     <td style="text-align: left"><input type="file"/></td>
                 </tr>
                 <tr>
                     <td style="text-align:right">密码：</td>
                     <td style="text-align: left"><input id="txt2" type="password"/></td>
                 </tr>
                 <tr>
                     <td style="text-align:right">性别：</td>
                     <td style="text-align: left">
                         <select>
                             <option>男</option>
                             <option>女</option>
                         </select></td>
                 </tr>
                 <tr>
                     <td style="text-align:right">会员：</td>
                     <td style="text-align: left">
                         <label><input name="member" type="radio"/>永久会员</label>
                         <label><input name="member" type="radio"/>包年会员</label>
                         <label><input name="member" type="radio"/>包月会员</label>
                     </td>
                 </tr>
                 <tr>
                     <td style="text-align:right">爱好：</td>
                     <td style="text-align: left">
                         <label><input name="lovely" type="checkbox"/>音乐</label>
                         <label><input name="lovely" type="checkbox"/>运动</label>
                         <label><input name="lovely" type="checkbox"/>看书</label>
                         (至少选两个爱好)</td>
                 </tr>
                 <tr>
                     <td style="text-align:right">个人介绍：</td>
                     <td style="text-align: left"><textarea></textarea></td>
                 </tr>
                 <tr>
                     <td style="text-align:right" >
                         <div id="bt1">提交1</div>
                     </td>
                     <td style="text-align:left"><input type="reset"/><input type="submit"/></td>

                 </tr>

             </table>
         </form>
     </div>
 </div>
 </body>
 </html>